<!--
 * @Author: JiraiyaChen 49619401+JiraiyaChen@users.noreply.github.com
 * @Date: 2024-01-15 16:36:46
 * @LastEditors: JiraiyaChen 49619401+JiraiyaChen@users.noreply.github.com
 * @LastEditTime: 2024-01-15 16:57:32
 * @Description: 配置面板 tab切换
-->

<template>
  <el-tabs class="MyTabs" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane name="first">
      <span slot="label"> <svg-icon icon-class="text" /> 文本配置 </span>
      <slot name="1"></slot>
    </el-tab-pane>
    <el-tab-pane name="second">
      <span slot="label"> <svg-icon icon-class="style" /> 样式配置 </span>
      <slot name="2"></slot>
    </el-tab-pane>
    <el-tab-pane name="third">
      <span slot="label"> <svg-icon icon-class="screen" /> 显示配置 </span>
      <slot name="3"></slot>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  name: "my-tabs",
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped>
.MyTabs >>> .el-tabs__header {
  background: #f6f7fe;
}

.MyTabs >>> .el-tabs__item.is-active {
  background: #409eff;
  color: #fff !important;
}
.MyTabs >>> .el-tabs__item {
  padding: 0 15px !important;
}
.MyTabs >>> .el-tabs__active-bar {
  display: none;
}
</style>
